@extends('public.base')
@section('body')
  <div class="layui-fluid">
    <div class="layui-row">
      <div class="layui-card">
        <div class="layui-card-header">
          <div class="layui-breadcrumb" lay-filter="breadcrumb">
            <a lay-href="">主页</a>
            <a><cite>自由鸟小程序</cite></a>
            <a><cite>提现记录</cite></a>
          </div>
        </div>
        <!-- 搜索区/按钮区 -->
        <div class="layui-form search_form_header">
          <form id="search_form" name="search_form" lay-filter="search-form">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
              <div class="layui-form-item">

                <div class="layui-inline">
                  <div class="layui-btn-group form_quick_date">
                    <a class="layui-btn layui-btn-primary" data-type="1"
                       onclick="form_do_set_day(1,null,null)">今天</a>
                    <a class="layui-btn layui-btn-primary" data-type="2"
                       onclick="form_do_set_day(2,null,null)">昨天</a>
                    <a class="layui-btn layui-btn-primary" data-type="3"
                       onclick="form_do_set_day(3,null,null)">本周</a>
                    <a class="layui-btn layui-btn-primary" data-type="4"
                       onclick="form_do_set_day(4,null,null)">上周</a>
                    <a class="layui-btn layui-btn-primary" data-type="5"
                       onclick="form_do_set_day(5,null,null)">本月</a>
                    <a class="layui-btn layui-btn-primary" data-type="6"
                       onclick="form_do_set_day(6,null,null)">上月</a>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label layui-hide-md">注册日期</label>
                  <div class="layui-input-inline" style="width:100px;">
                    <input type="text" class="layui-input" id="search_start_date" name="start_date"
                           autocomplete="off"
                           format="date" placeholder="注册开始日期">
                  </div>
                  <div class="layui-form-mid">
                    -
                  </div>
                  <div class="layui-input-inline" style="width:100px;">
                    <input type="text" class="layui-input" id="search_end_date" name="end_date"
                           autocomplete="off"
                           format="date" placeholder="注册结束日期">
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label layui-hide-md">昵称</label>
                  <div class="layui-input-inline">
                    <input type="text" name="truename" autocomplete="off" class="layui-input"
                           placeholder="昵称,如:abc" class="layui-input">
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label layui-hide-md">手机号</label>
                  <div class="layui-input-inline">
                    <input type="text" name="mobile" autocomplete="off" class="layui-input"
                           placeholder="手机号,如:abc" class="layui-input">
                  </div>
                </div>


                <div class="layui-inline">
                  <label class="layui-form-label layui-hide-md">直推</label>
                  <div class="layui-input-inline">
                    <input type="text" name="p1" autocomplete="off" class="layui-input"
                           placeholder="直推者uid,如:30" class="layui-input">
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label layui-hide-md">间推</label>
                  <div class="layui-input-inline">
                    <input type="text" name="p2" autocomplete="off" class="layui-input"
                           placeholder="间推者uid,如:40" class="layui-input">
                  </div>
                </div>


                <div class="layui-inline">
                  <label class="layui-form-label layui-hide-md">等级</label>
                  <div class="layui-input-inline" style="width:140px">
                    <select  name="lid">
                      <option value="">按会员类型</option>
                      <option value="1">普通会员</option>
                      <option value="2">入驻会员</option>
                    </select>
                  </div>
                </div>
                <div class="layui-inline">
                  <div class="layui-input-inline">
                    <button id="search_btn" class="layui-btn layui-btn-normal"><i
                              class="layui-icon" lay-submit="">&#xe615;</i>搜索
                    </button>

                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>

        <div class="layui-card-body">
          <!-- 表格定义 -->
          <table class="layui-table" id="main_table"  lay-filter="main_table"></table>
          <!-- 操作按钮定义 -->
          <script type="text/html" id="search_table-operate-bar">
            <div class="layui-btn-group">
              <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>
              <button class="layui-btn layui-btn-xs" lay-event="show">详情</button>
              <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="shop">商店</button>

            </div>
          </script>
        </div>
      </div>

    </div>
  </div>
  <!-- 勿删，这里是显示帮助说明文，会调用系统菜单中的说明文档 -->
  <div id="page_tip"></div>
  <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js?{{time()}}"></script>
  <script src="{{ADMIN_PATH}}js/admin.common.js?{{time()}}"></script>
  <script>
      // ==========================  公共变量区  ===========================================
      var index_url='{{url('admin/weixin/user/index')}}';  //列表
      var show_url='{{url('admin/weixin/user/show')}}';  //列表
      var freeze_url='{{url('admin/weixin/user/freeze')}}';  //冻结
      var edit_url='{{url('admin/weixin/user/edit')}}';  //编辑
      var shop_url='{{url('admin/weixin/user/shop')}}';  //商店

      //表格id
      var main_table_id = 'main_table';
      //搜索区的表单form id
      var search_form_id = 'search_form';
      //初始化后的表格对象
      var main_table;

      // ==========================  全局函数区  ===========================================

      //默认函数，重载当前页面数据，1、页面初始化 2、配合搜索 3、配合post_data等操作的回调，如：编辑或删除完表格的记录后，刷新当前页面等
      function reload_data(param) {
          //搜索表格
          do_search_table(main_table, search_form_id, param);

      }

      // ==============================  业务处理  ==============================================
      layui.config({
          base: '{{ADMIN_PATH}}layui/layuiadmin/' //静态资源所在路径
      }).extend({
          index: 'lib/index' //主入口模块
      }).use(['index', 'laydate', 'table'], function(){

          //========================================== layui引用区 ==========================================
          var $ = layui.$,
              table = layui.table
              , form = layui.form
              , laydate = layui.laydate
              , element = layui.element
          ;

          // ==============================  业务区  =========================================
          //表格默认排序字段
          var table_sort = 'uid';
          var table_order = 'desc';

          main_table = table.render({

              elem: '#' + main_table_id
              , url: index_url //异步数据接口
              , method: 'post' //接口http请求类型
              //, headers: {token: '123456'} //接口的请求头
              , limit: 10 //每页显示的条数
              , limits: 50//	每页条数的选择项
              , initSort: { //初始化时的排序,如果不设的话，将无法标记表头的排序状态
                  field: table_sort
                  , type: table_order
              }
              , where: {sort: table_sort, order: table_order}
              , loading: true //显示加载
              , text: '查询无数据' //空数据时的异常提示
              , page: true //开启分页
              ,cols: [[
                  {field:'uid', title: 'ID', width:80, sort: true}
                  ,{field:'truename', title: '用户昵称', width:120, sort: true}
                  ,{field:'mobile', title: '手机号', width:120, sort: true}
                  ,{field:'lid', title: '会员等级', width:140,templet:function(d){
                          if(d.lid==1){
                              return '普通会员';
                          }else{
                              return '入驻会员';
                          }
                      }}
                  ,{field:'is_vip', title: '是否VIP',width:100,templet:function(d){
                          if(d.is_vip==1){
                              return '是';
                          }else{
                              return '否';
                          }
                      }}
                  ,{field:'p1user_name', width:80, title: '直推者'}
                  ,{field:'p2user_name', width: 219, title: '间推者'}
                  ,{field:'balance', width:100, title: '余额', sort: true}
                  ,{field:'score', width:100, title: '金币', sort: true}
                  ,{field:'create_time', width:160, title: '注册时间', templet: layui_table_time_tpl_1}
                  , {
                      title: '冻结',
                      field: 'status',
                      width: 95,
                      sort: true,
                      templet: temp_switch_tpl,
                      fixed: 'right'
                  }
                  , {title: '操作', toolbar: '#search_table-operate-bar', width: 160, align: 'center', fixed: 'right'}
              ]]
              , done: function (res, curr, count) {
                  //如果是异步请求数据方式，res即为你接口返回的信息。
                  if (res.status != 200) {
                      show_error(res.message);
                  }
                  if (count == 0) {
                      layer.msg('暂无相关数据');
                  }
              }
          });


          // ==============================  监听区  =========================================

          // 表格监听
          table.on('sort()', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
              //console.log(obj.field); //当前排序的字段名
              //console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
              reload_data({sort: {sort: obj.field, order: obj.type}});
          });

          //表格中的所有的switch监听
          form.on('switch()', function (obj) {
              //当前表格行数据
              var json = JSON.parse(decodeURIComponent($(this).data('json')));

              var name = obj.elem.name;
              var value = obj.elem.checked === true ? 1 : 0;

              var o = {};
              //数据库更新的主键
              o['id'] = json.id;
              //获取当前点击的checkbox的input名称和值
              o[name] = value;

              console.log(o);
              layer.confirm('确定改变当前状态吗?', function (index) {
                  //提交数据，1、提交网址 2、提交数据 3、是否关闭本iframe窗口(在弹出iframe时使用)
                  post_data(edit_url, o, ''
                      //正确返回时，执行
                      , function () {
                          //
                      }
                      //错误返回或其它错误时，执行
                      , function () {
                          obj.elem.checked = !obj.elem.checked;
                          //重新渲染
                          form.render();
                      });

                  //关闭自身提示框
                  layer.close(index);
              }, function (index) {
                  //按钮【按钮二】的回调
                  obj.elem.checked = !obj.elem.checked;
                  //重新渲染
                  form.render();
              });

          });

          //其他按钮监听
          $("#search_btn").on('click', function () {
              reload_data();
              return false;
          });

          $("#add_btn").on('click', function () {
              var index = layer.open({
                  type: 2
                  , title: '新增'
                  , content: add_url
                  , area: ['80%', '580px'] //宽高
                  , maxmin: true
                  , scrollbar: false
                  , end: function (index, layero) {
                      //关闭弹窗后的事件
                  }
              });
              return false;
          });

          //监听单元格编辑
          table.on('edit(main_table)', function (obj) {
              var value = obj.value //得到修改后的值
                  , data = obj.data //得到所在行所有键值
                  , field = obj.field; //得到字段
              var o = {};
              o['id'] = data.id;
              o[field] = value;

              layer.confirm('确定修改吗?', function (index) {
                  //提交数据
                  post_data(edit_url, o, ''
                      //正确返回时，执行
                      , function () {
                          reload_data();
                      }
                      //错误返回或其它错误时，执行
                      , function () {
                      });

                  //关闭自身提示框
                  layer.close(index);
              });
          });

          //工具条监听
          table.on('tool(main_table)', function (obj) {
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的DOM对象

              if(layEvent === 'shop'){ //查看
                  //提交数据
                  var index = layer.open({
                      type: 2
                      , title: '商店列表'
                      , content: shop_url + "?uid=" + data.uid
                      , area: ['80%', '330px'] //宽高
                      , maxmin: true
                      , scrollbar: true
                      , end: function (index, layero) {
                          //关闭弹窗后的事件
                      }
                  });

                  //do somehing
              } else if(layEvent === 'freeze'){ //删除

                  layer.confirm('确定禁用此用户吗?', function (index) {
                      //提交数据
                      //提交数据
                      var o = {uid: data.uid};
                      $.post(freeze_url, o, function (res) {
                          try {
                              if (res.status == 200) {
                                  //重新刷新父窗口的数据区
                                  table.reload('test-table-reload'); //重载表格
                              } else {
                                  layer.msg(res.message);
                              }
                          } catch (e) {
                              layer.msg("异常");
                          }
                      });

                      //关闭自身提示框
                      layer.close(index);
                  });

              }

              else if (obj.event === 'show') {
                  var index = layer.open({
                      type: 2
                      , title: '查看用户信息'
                      , content: show_url + "?uid=" + data.uid
                      , area: ['80%', '550px'] //宽高
                      , maxmin: true
                      , scrollbar: false
                      , end: function (index, layero) {
                          //关闭弹窗后的事件
                      }
                  });
              }
              else if(layEvent === 'edit'){ //编辑
                  layer.open({
                      type: 2,
                      title: '商店列表:'+data.nickname,
                      shade: false,
                      area: ['70%', '500px'], //宽高
                      content: edit_url+'?uid='+data.uid,
                      zIndex: layer.zIndex //重点1
                      //,btn: ['保存', '取消']
                      ,yes: function(index, layero){
                          //点击确认触发 iframe 内容中的按钮提交
                          var submit = layero.find('iframe').contents().find("#form_save");
                          submit.click();
                      }
                      ,success: function(layero){
                          layer.setTop(layero); //重点2
                      }
                  });
              }else if (obj.event === 'detail') {

                  //提交数据
                  layer.confirm('确定要重置OTP绑定?', function (index) {
                      //提交数据
                      var o = {uid: data.uid};
                      $.post(detail_url, o, function (res) {
                          try {
                              if (res.status == 200) {
                                  //重新刷新父窗口的数据区
                                  table.reload('test-table-reload'); //重载表格
                              } else {
                                  layer.msg(res.message);
                              }
                          } catch (e) {
                              layer.msg("异常");
                          }
                      });

                      //关闭自身提示框
                      layer.close(index);
                  });
              }
          });

          //监听搜索表单提交
          form.on('submit(search-form)', function (data) {
              return false;
          });

          //========================================== 渲染区 ==========================================
          //表单重新渲染，请保存到最后一行
          //渲染表单
          form.render(null, 'search_form');
          //导航栏渲染
          element.render('breadcrumb', 'breadcrumb');
          //========================================== 时间区 ==========================================
          var insStart = laydate.render({
              elem: '#search_start_date'
              , type: 'date'
              , format: 'yyyy-MM-dd'
              //, min: 0
              , done: function (value, date) {
                  //更新结束日期的最小日期
                  insEnd.config.min = lay.extend({}, date, {
                      month: date.month - 1
                  });
                  //自动弹出结束日期的选择器
                  insEnd.config.elem[0].focus();
              }
          });

          //结束日期
          var insEnd = laydate.render({
              elem: '#search_end_date'
              , type: 'date'
              , format: 'yyyy-MM-dd'
              //, min: 0
              , done: function (value, date) {
                  //更新开始日期的最大日期
                  insStart.config.max = lay.extend({}, date, {
                      month: date.month - 1
                  });
              }
          });
          form_do_set_day(1, null, null);


      });
      function temp_switch_tpl(d){
          if(d.status==1){
              return '<input type="checkbox" name="' + this.field + '" lay-skin="switch" lay-text="冻结|解冻" data-json="' + encodeURIComponent(JSON.stringify(d)) + '" lay-filter="component-switch"  checked>';
          }else{
              return '<input type="checkbox" name="' + this.field + '" lay-skin="switch" lay-text="冻结|解冻" data-json="' + encodeURIComponent(JSON.stringify(d)) + '" lay-filter="component-switch"  >';
          }

      }
  </script>
@stop